/*
  拆分一个功能模块的思路
  第一步：数据逻辑(以数据为切入点分析拆解功能)
  第二步：界面逻辑(在以界面效果去深化美化效果)
  第三步：事件实现(绑定事件，将功能和特效结合)
*/

// 1.数据逻辑

// 1.1处理数据
/**
 * 定义处理数据函数 resData
 * 传入的参数为字符串类型{string}
 * 最终得到的形式[{time:时间,word:歌词}]
 */
// console.log(lrc);
function resData(lrc) {
  //拆解成数组,根据换行符拆分
  let predata = lrc.split("\n");
  // console.log(predata);
  // 进一步拆解每一项
  let handata = predata.map((item) => {
    return item.split("]");
  });
  // console.log(handata);
  // 处理成数组对象形式
  let result = handata.map((item) => {
    // 此处获取的时间为字符串，需要通过函数处理转换为数值
    const time = getTime(item[0].slice(1));
    const word = item[1];
    return {
      time,
      word,
    };
  });
  // console.log(result);
  return result;
}
const lrcData = resData(lrc);
// console.log(lrcData);
/**
 * 定义一个计算时间的函数getTime
 * 获取准确的秒数s
 */
function getTime(str) {
  const data = str.split(":");
  // 隐式转换
  const time = +data[0] * 60 + +data[1];
  // console.log(time);
  return time;
}
// getTime("00:41.99");

// 1.2根据处理好的数据渲染页面
// 获取元素
const doms = {
  container: document.querySelector(".container"),
  ul: document.querySelector(".container ul"),
  audio: document.querySelector("audio"),
};

function render(data) {
  // 如果不想操作dom树太过频繁，可以事先将创造出来的Li全部添加到一个DOM片段中
  let frag = document.createDocumentFragment();
  // 使用创建元素的方法操作dom会直接略过解析html步骤，这比设置ul的html内容效率略高
  data.forEach((item) => {
    const li = document.createElement("li");
    li.innerHTML = item.word;
    frag.appendChild(li);
  });
  // 最后将添加了所有li元素的DOM片段追加到ul中
  doms.ul.appendChild(frag);
}

render(lrcData);

// 1.3定义查找精确歌词时间时对应的li下标
/**
 * 定义查找精确歌词时间时对应的li下标的函数findIndex
 *根据歌词出现时间和歌曲当前播放的时间找出元素内容为正在播放的歌词的li的索引
 */
// for (let i = 0; i < lrcData.length; i++) {
//   console.log(lrcData[i].time);
// }
function findIndex() {
  // 获取播放器的当前播放时间
  let currtime = JSON.parse(localStorage.getItem("currtime")) || 0;
  // doms.audio.currentTime = currtime;
  console.log(currtime);
  // 需要遍历来判断每一项的时间
  for (let i = 0; i < lrcData.length; i++) {
    // 如果 当前时间 < 歌词出现时间，返回i-1
    if (currtime < lrcData[i].time) {
      return i - 1;
    }
  }
  // 如果 当前时间 >= 歌词出现时间，返回最后一句的下标
  // 让其显示最后一句
  return lrcData.length - 1;
}
// console.log(findIndex());

// 2.界面逻辑
// 定义偏移量，根据偏移量来实现效果
function offSet() {
  const i = findIndex();
  // console.log(i);
  // 1.歌词高亮模块
  // 先移除有active类名的li的active类名
  if (doms.ul.querySelector(".active")) {
    doms.ul.querySelector(".active").classList.remove("active");
  }
  // 给当前的歌词添加高亮属性
  if (doms.ul.children[i]) {
    doms.ul.children[i].classList.add("active");
  }

  // 2.定义偏移量
  // 当前高亮li距离顶部的距离 - container盒子高度的一半 = ul的偏移量
  const top =
    doms.ul.children[0].clientHeight * (i + 0.5) -
    doms.container.clientHeight / 2;
  const pyl = top < 0 ? 0 : top;
  // 联动ul
  doms.ul.style.transform = `translateY(-${pyl}px)`;
}

// 开局就要渲染页面
doms.audio.currentTime = JSON.parse(localStorage.getItem("currtime")) || 0
offSet();

// 3.绑定事件
doms.audio.addEventListener("timeupdate", () => {
  // 1.存储当前播放时间
  localStorage.setItem("currtime", JSON.stringify(doms.audio.currentTime));
  // 2.调用偏移量函数
  offSet();
});
